<template>
    <div class="page-collect">
        <collect-list :CollectList="CollectList" v-if="this.$store.state.userInfo"></collect-list>
        <collect-empty text="还没有收藏的文章" v-if="!this.$store.state.userInfo || showEmpty" :showEmpty="showEmpty"></collect-empty>
        <collect-toast :loading="toasts.loading" :toast="toasts.toast" :text="toasts.text" :icon="toasts.icon" :iconfont="toasts.iconfont"></collect-toast>
    </div>
</template>

<script>
import CollectList from '../components/Collect/Index'
import CollectEmpty from '../components/Common/Empty/Index'
import CollectToast from '../components/Common/Toast/Index'
export default {
    name: 'PageCollect',
    components: {
        CollectList,
        CollectEmpty,
        CollectToast
    },
    data() {
        return {
            CollectList: [],
            showEmpty: false,

            toasts: {
                loading: false,
                toast: false,
                text: '',
                icon: false,
                iconfont: ''
            }
        }
    },
    methods: {
        //获取收藏列表
        getCollect() {
            if(this.$store.state.userInfo) {
                this.ToastLoading()
                this.$post('notice/collect/list.php',{
                    id: this.$store.state.userInfo.id
                })
                .then((res) => {
                    if(res.code == 400) {
                        this.Toast(`${res.desc}`,'icon-meh',800)
                        this.$store.commit('setUserInfo','')
                    }else {
                        this.CollectList = res
                        this.ToastClear()
                        if(res.length == 0) {
                            this.showEmpty = true
                        }
                    }
                    
                })
            }
        },
        //弹窗
        Toast(text,iconfont,time) {
            this.toasts.loading = false
            this.toasts.text = text
            this.toasts.icon = true
            this.toasts.iconfont = iconfont
            this.toasts.toast = true
            window.setTimeout(() => {
                this.toasts.toast = false
            },time);
        },
        ToastLoading() {
            this.toasts.loading = true
            this.toasts.icon = false
            this.toasts.text = '加载中...'
            this.toasts.toast = true
        },
        ToastClear() {
            this.toasts.toast = false
        }
    },
    created() {
        this.getCollect()
    }
}
</script>

<style scoped>
.page-collect{
    width:100vw;
    height:100vh;
    overflow: auto;
    padding-bottom:1rem;
    position: fixed;
    background:#fff;
}
</style>